<template>
  <div class="hotCompany">
    <table-box :title="titleType">
      <template v-slot:type-span>
        <span class="selectCity" @click="searchDataByLocation">全部</span>
        <span v-for="(items, idx) in hotCity" :key="idx" class="selectCity" @click="searchDataByLocation">
          {{items.id}}
        </span>
      </template>
      <template v-slot:item-list>
        <item-card v-for="(items, idx) in hotCompanyFilter" :key="idx" :cont="items"></item-card>
      </template>
    </table-box>
  </div>
</template>
<script>
// 引入tableBox组件，该组件可被复用
import TableBox from "@/components/returnee/tableBox.vue"
// 引入自定义的span组件
import TypeSpan from "@/components/returnee/typeSpan.vue"
// 引入自定义的card组件
import ItemCard from "@/components/returnee/itemCard.vue"
// 引入获取热门城市的接口
import { getReturneeHotCity } from "@/api"
// 引入获取热门公司的接口
import { getReturneeHotCompany } from "@/api"
export default {
  name: "returneehotcompany",
  components: {
    TableBox,
    TypeSpan,
    ItemCard
  },
  data() {
    return {
      titleType: "热门公司",
      hotCity: "",
      hotCompany: "",
      hotCompanyFilter: "",
      defaultIndex: 0
    }
  },
  methods: {
    searchDataByLocation(event){
      [...event.target.parentNode.children].forEach((val)=>{
        val.style = "background:#fff;color:#000";
      });
      event.target.style = "background:#5dd5c8;color:#fff";
      if(event.target.innerText === "全部"){
        this.hotCompanyFilter = this.hotCompany;
      }else{
        this.hotCompanyFilter = this.hotCompany.filter(val => {
           return val.location.includes(event.target.innerText);
         });
      }
    }
  },
  mounted() {
    getReturneeHotCity().then((res)=>{
      this.hotCity = res.data.data;
    });
    getReturneeHotCompany().then((res)=>{
     this.hotCompany =  res.data.data;
     this.hotCompanyFilter = res.data.data;
     document.querySelectorAll(".selectCity")[this.defaultIndex].style = "background:#5dd5c8;color:#fff";
    });
  }
} 
</script>
<style lang="less" scoped>
  .selectCity{
        display: inline-block;
        width: 96px;
        height: 34px;
        text-align: center;
        line-height: 34px;
        background-color: #fff;
        border-radius: 6px;
        margin: 6px;
        font-size: 14px;
        cursor: pointer;
  }
</style>